<template>
    <div class="news-box">
        <el-card class="table-card">
            <template #header>
                <el-button @click="addLists()" size="large" icon="Plus">添加不通过理由</el-button>
            </template>
        </el-card>
        <el-table :data="lists" border style="width: 100%" @row-click="rowCli">
            <el-table-column prop="id" label="编号" align="center" width="100px" header-align="center"></el-table-column>

            <el-table-column prop="name" label="理由" align="center" header-align="center"> </el-table-column>

            <el-table-column label="操作" align="center" header-align="center" width="160px">
                <template #default="scope">
                    <!-- <el-icon @click.stop="editFun(scope.row)" class="lists-edit-icon">
                        <Edit />
                    </el-icon> -->

                    <el-icon @click.stop="deleteFun(scope.row.id)" class="lists-delete-icon">
                        <Delete />
                    </el-icon>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align: right; margin-top: 20px; overflow: hidden">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                @prev-click="handlePrev" @next-click="handleNext" :current-page="pageNum"
                :page-sizes="[5, 10, 20, 50, 100]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination">
            </el-pagination>
        </div>
        <!-- 添加编辑文章类型 -->
        <addEdit :show="showAddEdit" :addEditData="addEditData" :status="addEditStatus" @hide-addEdit="hideAddEdit" />

    </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { dleteOrderJuqian, getOrderJuqianList } from '@api/reason'
import addEdit from './components/addEdit.vue'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from "@/pinia/user"
import { ElMessage } from 'element-plus'
import { TextToCode } from 'element-china-area-data'

const userStore = useUserStore()

const router = useRouter()

// *********************************************列表
const lists = ref([
    {
        id: 1,
        username: "asdfasdf",
        phone: 13168365845
    },
    {
        id: 2,
        username: "fdghfghh",
        phone: 13168365845
    }
])

//获取列表
async function getLists() {

    let res = await getOrderJuqianList()

    if (res.code == 200) {
        lists.value = res.data.map(v => {
            return {
                ...v,
                moren: v.moren == "1" ? true : false
            }
        })
    }

}

// *********************************************添加编辑
const showAddEdit = ref(false) //显示隐藏弹框
const addEditStatus = ref('add') //添加编辑状态
const addEditData = ref({
    name: '',
    consignee: '',
    id: '',
    streent: '',
    tel: '',
    shengshiqu: []
})

//添加文章
function addLists() {
    addEditData.value.message = ''
    addEditStatus.value = 'add'
    showAddEdit.value = true
}

//添加编辑文章回调
function hideAddEdit(type) {
    showAddEdit.value = false
    if (type != 'cancel') {
        getLists()
    }
}

//编辑文章
function editFun(item) {
    let {
        id,
        message
    } = item;

    addEditData.value.id = id
    addEditData.value.message = message
    addEditStatus.value = 'edit'
    showAddEdit.value = true
}

//删除文章
function deleteFun(id, index) {
    ElMessageBox.confirm('确定删除理由?')
        .then(async () => {
            let res = await dleteOrderJuqian({ id })
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success',
                })
                getLists()
            }
        })
        .catch(() => { })
}


//查看详情
function rowCli(item, column) {
    // router.push({ path: '/home/news/detail', query: { id: row.id } })
    addEditData.value.id = item.id
    addEditData.value.username = item.username
    addEditData.value.phone = item.phone
    addEditStatus.value = 'read'
    // showAddEdit.value = true
}

// 修改为默认
const changeMoren = async (id) => {
    let res = await updateCangkuMoren({ id })
    if (res.code == 200) {
        ElMessage({
            message: '操作成功!',
            type: 'success',
        })
        getLists()
    }
}

onMounted(() => {
    getLists()
})
</script>
<style lang="scss" scoped>
.news-box {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;

    .left-right-box {
        position: absolute;
        top: 172px;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;

        .left-box {
            height: 100%;
            width: 230px;
            overflow-y: auto;
            overflow-x: hidden;
            padding-top: 50px;
            box-sizing: border-box;
            border: 1px solid #ebeef5;
            position: relative;
            overflow-y: auto;
            border-radius: 4px;
            margin-right: 20px;

            .title {
                font-size: 14px;
                padding: 8px 17px;
                color: #636363;
                height: 32px;
                line-height: 32px;
                font-weight: 600;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                background: #fff;
                z-index: 999;

                .icon {
                    float: right;
                    font-size: 24px;
                    font-weight: 400;
                    cursor: pointer;
                }
            }

            .left-lists {
                font-size: 12px;
                padding: 8px 17px;
                color: #636363;
                height: 32px;
                line-height: 32px;
                cursor: pointer;
                position: relative;

                .name {
                    float: left;
                }

                .input-name {
                    width: 90px;
                    float: left;
                    padding: 0;

                    .el-input__inner {
                        padding: 0 10px;
                    }
                }

                .option {
                    float: right;
                }
            }
        }

        .left-lists.active {
            color: #4c9ff2 !important;
            background-color: #f5f5f5;
        }

        .right-box {
            flex: 1;
            overflow-y: auto;
        }
    }
}
</style>
  